import {
  Layout,
  Menu,
  Button,
  Avatar,
  Space,
  Dropdown,
  Badge,
  Breadcrumb,
  Row,
  Col,
  message
} from 'antd'
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  UserOutlined,
  SearchOutlined,
  BellOutlined,
  DownOutlined,
  QuestionCircleOutlined
} from '@ant-design/icons'
import React, { useEffect, useState } from 'react'
import { useNavigate, useLocation } from 'react-router-dom'
import { getStorage, getToken, setToken } from '../utils/tools'
import { adminMenuItems, sellerMenuItems, menuItems } from '../grants'
import head from '../assets/img/logo.png'

const { Header, Sider, Content } = Layout

export default function MyLayout({ children }) {
  const [collapsed, setCollapsed] = useState(false)
  const [themeColor, setThemeColor] = useState('#3961F3')
  const [siteTitle, setSiteTitle] = useState('LBS智慧营销平台')
  const [breadcrumb, setBreadcrumb] = useState([])
  const navigate = useNavigate()
  // 获取路径
  const { pathname } = useLocation()
  // 导航
  // 判断角色是哪一种
  const role = getStorage('accountType')
  const menuItems = role === '0' ? adminMenuItems : sellerMenuItems

  // 获取面包屑导航
  const findDeepPath = (key) => {
    const result = []
    const findInfo = (arr) => {
      arr.forEach((item) => {
        const { children, ...info } = item
        result.push(info)
        if (children) {
          findInfo(children)
        }
      })
    }
    findInfo(menuItems)
    // 根据当前的key值过滤数据
    let tmpData = result.filter((item) => key.includes(item.key))

    tmpData = tmpData.map((item) => {
      return { title: item.label, href: item.key }
    })
    if (tmpData.length > 0) {
      return tmpData
    }
    return []
  }
  useEffect(() => {
    // 判断是否有token
    if (!getToken()) {
      message.error('请先登录')
      navigate('/')
    }
    if (typeof window !== 'undefined') {
      setBreadcrumb(findDeepPath(pathname))
    }
  }, [])
  return (
    <Layout style={{ height: '100vh' }}>
      <Sider
        trigger={null}
        collapsible
        collapsed={collapsed}
        style={{ backgroundColor: themeColor }}
        className="mysider"
      >
        <div className="logo">
          <img src={head} alt="logo" style={{ width: 30, height: 30 }} />
          <span style={{ marginLeft: 10, display: collapsed ? 'none' : '' }}>
            LBS智慧营销平台
          </span>
        </div>
        <Menu
          mode="inline"
          style={{ backgroundColor: themeColor, color: '#FFF' }}
          defaultSelectedKeys={['/admin']}
          onClick={({ key }) => {
            // console.log(key)
            setBreadcrumb(findDeepPath(key))
            navigate(key)
          }}
          items={menuItems}
        />
      </Sider>
      <Layout>
        <Header
          style={{
            padding: 0,
            backgroundColor: '#FFF',
            display: 'flex',
            justifyContent: 'space-between',
            paddingRight: 24,
            alignItems: 'center'
          }}
        >
          <Button
            type="text"
            icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
            onClick={() => {
              setCollapsed(!collapsed)
            }}
            style={{
              fontSize: '16px',
              width: 64,
              height: 64
            }}
          />
          <div
            style={{
              display: 'flex',
              alignItems: 'center'
            }}
          >
            <Space size={'middle'} style={{ fontSize: 16, marginRight: 16 }}>
              <SearchOutlined />
              <Badge dot>
                <BellOutlined />
              </Badge>
              <QuestionCircleOutlined />
            </Space>
            <Dropdown
              menu={{
                items: [
                  {
                    label: (
                      <span
                        onClick={() => {
                          setToken('')
                          navigate('/')
                          message.success('退出成功')
                        }}
                      >
                        退出
                      </span>
                    ),
                    key: '0'
                  }
                ]
              }}
            >
              <a onClick={(e) => e.preventDefault()}>
                <Avatar
                  style={{ backgroundColor: '#87d068', marginRight: 10 }}
                  icon={<UserOutlined />}
                />
                <Space>
                  {/* 获取管理员名称 */}
                  {getStorage('nickname')}
                  <DownOutlined style={{ fontSize: 10, color: '#999' }} />
                </Space>
              </a>
            </Dropdown>
          </div>
        </Header>
        <Content
          style={{
            overflow: 'auto'
          }}
        >
          <Row className="breadcrumb">
            <Col span={24}>
              <Breadcrumb items={breadcrumb} />
            </Col>
          </Row>
          {children}
        </Content>
      </Layout>
    </Layout>
  )
}
